<template>
	<view class="box">
		<view class="header">
			<view class="item">
				<image class="health" src="../../static/img/indexPage/health.png" style="width: 80rpx;height: 80rpx;"
					mode="aspectFit">
				</image>
			</view>
		</view>

		<view class="wrap">
			<scroll-view scroll-y class="chat" :scroll-top="scrollTop">
				<view class="list">
					<view class="chat-news" v-for="(item,index) in list" :key="index">
						<!-- 根据角色判断 -->
						<block v-if="item.role === 'me'">
							<!-- 自己的消息显示在右侧 -->
							<view class="news-lf">
								<text class="new-txt">{{item.content}}</text>
								<image class="new-img" src="/static/img/avatar/myAvatar.jpg"></image>
							</view>
						</block>
						<!-- 对方的消息显示在左侧 -->
						<block v-else>
							<view>
								<image class="new-img" src="../../static/img/indexPage/health.png"></image>
								<text class="new-txt">{{item.content}}</text>
							</view>
						</block>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 输入 -->
		<view class="message" :class="{ 'keyboard-open': keyboardOpenClass === 'keyboard-open' }">
			<uni-easyinput type="text" cursor-spacing="20" placeholder="请输入聊天内容…" v-model="inputValue"
				@focus="handleInputFocus" @blur="handleInputBlur"></uni-easyinput>
			<image :src="selectedImageSrc" style="width: 80rpx; height: 80rpx ;margin-left: 30rpx;" mode="aspectFill"
				@click="sendMessage">
			</image>
		</view>
	</view>
</template>

<script>
	import {
		sendMessageGpt,
		getUserId,
		listMsg
	} from "@/api/message";


	export default {
		data() {
			return {
				scrollTop: 0,
				list: [],
				inputValue: "",
				selectedImageSrc: "/static/img/healthPage/voice.png",
				imageSrc: ["/static/img/healthPage/voice.png", "/static/img/healthPage/send.png"],
				keyboardHeight: 0, // 用于存储输入法高度
				userId: 0
			};
		},
		// 使用watch监听inputValue的变化

		watch: {
			inputValue(newVal) {
				if (newVal !== '') {
					this.selectedImageSrc = this.imageSrc[1]; // 当输入框内容不为空时，切换图片路径
				} else {
					this.selectedImageSrc = this.imageSrc[0]; // 当输入框内容为空时，恢复初始图片路径
				}
			},
		},
		onLoad() {},
		methods: {
			// 发送消息
			sendMessage() {
				// 显示自己的信息
				this.list.push({
					id: this.id++,
					content: this.inputValue,
					role: "me",
				});
				var myMessage = {
					input: this.inputValue,
				}
				// 清空输入框
				this.inputValue = "";
				// 发送、存数据库
				sendMessageGpt(myMessage).then(response => {
					// 获取消息
					// 确保数据处理完成后再更新界面
					console.log(response)
					var message = response.data.content;
					this.list.push({
						id: this.id++,
						content: message,
						role: "AI",
					});
				})

			},
			handleInputFocus() {
				this.keyboardHeight = 300; // 假设值
				this.$nextTick(() => this.adjustMessagePosition());
			},
			handleInputBlur() {
				this.keyboardHeight = 0;
				this.$nextTick(() => this.adjustMessagePosition());
			},
			adjustMessagePosition() {
				if (this.keyboardHeight > 0) {
					this.keyboardOpenClass = 'keyboard-open';
				} else {
					this.keyboardOpenClass = '';
				}
			}
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: #F1F1F1;

		.header {
			width: 100%;
			height: 100rpx;
			background-color: #FFFFFF;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

			display: flex;
			align-items: center;

			.item {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.health {
					margin-left: 40rpx;
				}
			}
		}

		.wrap {
			height: 100%;
			width: 100%;
			display: flex;
			border-top: 0px;
			margin-top: 20rpx;
			box-sizing: border-box;
		}

		/* 聊天 */

		.chat-news {
			width: 100%;
			margin-top: 20rpx;
			overflow: hidden;
			background-color: #F1F1F1;
		}

		.news-lf {
			float: right;
			padding-right: 20rpx;
		}

		.chat-news::after {
			display: block;
			height: 0;
			clear: both;
			content: ‘’;
		}

		.new-rl {
			float: left;
			padding-left: 20rpx;
		}

		.new-img {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			vertical-align: middle;
			margin-right: 10rpx;
		}

		.new-txt {
			max-width: 300rpx;
			display: inline-block;
			border-radius: 6rpx;
			line-height: 40rpx;
			background-color: lightgreen;
			padding: 5rpx 20rpx;
			margin: 0 10rpx;
			margin-left: 50rpx;
		}

		.new-text {
			margin-left: 0;
			background: lightgreen;
		}

		.message {
			width: 100%;
			height: 100rpx;
			position: fixed;
			background-color: #fff;
			bottom: 0;
			left: 50%;

			transform: translateX(-50%);
			border-top: 2rpx solid #eee;
			border-radius: 15rpx;
			box-sizing: border-box;
			z-index: 3;

			display: flex;
			align-items: center;
			justify-content: space-between;

			.uni-easyinput.input {
				height: 50rpx;
				flex-grow: 1;
			}
		}

		.message.keyboard-open {
			bottom: 300rpx; // 假设键盘高度为300rpx
		}

	}
</style>